<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div p {
            background-color: yellow;
        }
        div>p
        {
            background-color:darkred;
        }
    </style>
</head>
<body>

<div>div p:后代选取器(以空格分隔)</div>
<div>
    <p>段落 1。 在 div 中。</p>
    <p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

<div>div>p:子元素选择器(以大于号分隔）</div>
<div>
    <p>段落 1。 在 div 中。</p>
</div>
<div>
    <span><p>段落 3。不在 直接div 中。嵌套在span中</p></span>
</div>

<div>div+p 相邻兄弟选择器</div>
<div>div~p 后续兄弟选择器</div>

</body>
</html>